<template>
	
	<view class="contain">
		<Header></Header>
		<view class="box">
		<view class="box1">
			<text>客户资料库</text>
		</view>
		<view class="box2">
			<uni-table class="table" ref="table" :loading="loading"  type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				
				<uni-tr class="tr">
					<uni-th align="left" width="50">序号</uni-th>
					<uni-th align="center" width="50">姓名</uni-th>
					<uni-th align="center" width="50">年龄</uni-th>
					<uni-th align="center" width="50">电话</uni-th>
				</uni-tr>
				
		        <uni-tr class="tr" v-for="(item,index) in tableData":key="index">
					<uni-td width="50">{{index+1}}</uni-td>
					<uni-td width="50">{{item.name}}</uni-td>
					<uni-td width="50">{{item.age}}</uni-td>
					<uni-td width="50">{{item.number}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				tableData:[
					{name:'和时间',age:89,number:18975246593},
					{name: '李四', age: 25, number:15849325597},
					{ name: '张三', age: 28, number: '12345678901' },
				    { name: '李四', age: 25, number: '09876543210' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: 'sm三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: 'bs三', age: 28, number: '12345678901' },
					{ name: '张ssh', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' },
					{ name: '张三', age: 28, number: '12345678901' }
				]
				
			}
		},
		methods: {
			
		}}
</script>

<style lang="scss">
	//客户资料库居中\高度、大小，交叉行颜色变换，上下滑动，文字居中,单元格宽度，固定行列
	//左右滑动删除，编辑，选中后可操作，选中行显示不同颜色，新增
	.contain{
		position:fixed;
		height: 100%;
		width: 100%;
		background-color: #D4E4DC;
		display: flex;
		flex-direction: column;
	}
	.box{
		display: flex;
		width:100%;
		overflow-y: auto;
		flex-direction: column;
		
	}
	
	.box1{
		
		display: flex;
		flex-direction: column;
		width:100%;
		//margin-top: 3%;
		align-items: center;
		background-color: #73b38e;
		font-size: 40rpx;
		font-weight: bolder;
	}
	.box2{
		display: flex;
		flex-direction: column;
		background-color: #D4E4DC;
		width:100%;
		align-items: center;
		
	}
	
	.table{
		width:100%;
		display: flex;
		background-color: #D4E4DC;
		align-items: center
		
	}
	.tr{
		
		display: flex;
		text-align: center;
		background-color: #D4E4DC;
	}
	
	.th{
		position: fixed;
		text-align: center;
		background-color: #D4E4DC;
		
	}
	
	.td{
		text-align: center;
		background-color: #D4E4DC;
	}
	uni-th{
		text-align: center;
	}
	uni-td{
		text-align: center;
	}
</style>

